<template>
  <div class="notfount errorpage" ref="bgstar" id="bgstar">
    <!-- 左上倒计时 -->
    <div class="down" @click="gotoWhere">{{ count }}S</div>
    <!-- 右上倒计时 -->
    <div class="dao" @click="gotoWhere">
      <van-circle
        v-model="currentRate"
        color="#f50"
        size="90px"
        :stroke-width="60"
        :rate="100"
        :speed="20"
        :text="text"
      />
    </div>
    <!-- 图片 -->
    <img :src="img" alt="" class="myimg" />
    <span class="spandot" v-for="(l, i) in spanNum" :key="i" :style="l"></span>
  </div>
</template>

<script>
let timer = null;
export default {
  name: "notFound",
  data() {
    return {
      img: require("@/assets/images/404.png"),
      count: 5,
      spanNum: [],
      currentRate: 0,
    };
  },
  watch: {
    currentRate(v) {
      if (v == 100) {
        this.gotoWhere();
      }
    },
  },
  computed: {
    text() {
      return (5 - Math.floor(this.currentRate / 20)) + "S";
    },
  },
  methods: {
    gotoWhere() {
      this.$router.push({
        name: "guide",
      });
    },
    spanInit() {
      var width = this.$refs.bgstar.clientWidth;
      var height = document.getElementById("bgstar").clientHeight;
      for (var i = 1; i < 520; i++) {
        var x = width * Math.random();
        var y = height * Math.random();

        var opacity = Math.random();
        var scaler = 1.5 * Math.random();
        var rate = 2.5 * Math.random();

        var r = Math.random() * 255;
        var g = Math.random() * 255;
        var b = Math.random() * 255;

        this.spanNum.push({
          left: x + "px",
          top: y + "px",
          background: `rgba(${r},${g},${b},${opacity})`,
          transform: "scale(" + scaler + ")",
          animationDelay: rate + "s",
        });
      }
    },
  },
  destroyed() {
    clearInterval(timer);
    timer = null;
  },
  mounted() {
    this.spanInit();
    timer = setInterval(() => {
      if (this.count > 0) {
        this.count--;
      } else {
        this.gotoWhere();
        clearInterval(timer);
        timer = null;
      }
    }, 1000);
  },
};
</script>


<style lang="scss" scoped>
.errorpage {
  width: 100%;
  height: 100%;
  background: #000;
  position: relative;
  .down {
    position: absolute;
    left: 20px;
    top: 20px;
    border: 1px solid #fff;
    color: #fff;
    width: 70px;
    height: 30px;
    border-radius: 10px;
    text-align: center;
    line-height: 30px;
  }
  .dao {
    position: absolute;
    top: 20px;
    right: 20px;
    ::v-deep .van-circle__text {
      color: #fff !important;
    }
  }
  .myimg {
    width: 270px;
    height: 270px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    z-index: 10;
  }
  .spandot {
    position: absolute;
    z-index: 100;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    animation: flash 3s infinite alternate;
  }
  @keyframes flash {
    from {
      opacity: 0;
    }
    to {
      opacity: 0.5;
    }
  }
}
</style>